<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ admin.name }}</span>
      </div>
      <div>
        <div style="display: flex; justify-content: center">

          <img
              src="../assets/userHead.png"
              style="width: 100px; height: 100px; border-radius: 50px"
              alt=""
          />

        </div>
        <div >
          用户编号:
          <el-tag  type="success">{{ admin.id }}</el-tag>
        </div>
        <div>
          手机号码:
          <el-tag type="success">{{ admin.phone }}</el-tag>
        </div>
        <div>
          性别:
          <el-tag type="success"> {{ admin.sex }}</el-tag>
        </div>
        <div>
          用户标签:
          <el-tag
              type="success"
              v-for="(r, index) in admin.authorityList"
              :key="index"
          >{{ r.permissionName }}
          </el-tag
          >
        </div>
        <div
            style="
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          "
        >
          <el-button type="primary" @click="showUpdate" :disabled="disabled1">修改信息</el-button>
          <el-button type="danger" @click="showUpdatePassword" :disabled="disabled1"
          >修改密码
          </el-button
          >
        </div>
      </div>
    </el-card>
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%">

      <el-form :model="admin2"
               ref="changeForm"
               :rules="rules2">

        <el-row>
          <el-form-item label="用户姓名" prop="name">
            <el-input type="text" v-model="admin2.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-select v-model="admin2.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="电话" prop="phone">
            <el-input type="text" v-model="admin2.phone" autocomplete="off"></el-input>
          </el-form-item>

            <el-button @click="dialogVisible = false">取 消</el-button>


            <el-button type="primary" @click="updateAdmin">确 定</el-button>
        </el-row>



      </el-form>


    </el-dialog>


    <el-dialog title="更新密码" :visible.sync="dialogVisible2" width="30%">
      <div>
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >

          <el-form-item label="密码" prop="pass">
            <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changePassword"
            >提交
            </el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AdminInfo",
  data() {

    return {
      disabled1:false,
      header: {
        Authorization: window.sessionStorage.getItem("tokenStr"),
      },
      admin: null,
      dialogVisible: false,
      admin3: {
        enabled: '',
        id: '',
        name: '',
        password: '',
        phone: '',
        sex: '',
        username: ''
      },
      admin2: null,
      dialogVisible2: false,
      ruleForm: {
        pass: "",
        checkPass: "",
      },
      rules: {
        pass: [{required: true, message: "请输入密码", trigger: "blur"}],
        checkPass: [{required: true, message: "请输入确认密码", trigger: "blur"}],
      },
      rules2: {
        phone: [
          {min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur"},
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号码",
          }],
        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
      },
    };
  },
  mounted() {
    this.initAdmins();
  },
  methods: {
    changePassword() {
      this.admin3.enabled = this.admin.enabled;
      this.admin3.id = this.admin.id;
      this.admin3.username = this.admin.username;
      this.admin3.name = this.admin2.name;
      this.admin3.phone = this.admin2.phone;
      this.admin3.sex = this.admin2.sex;
      this.admin3.password = this.ruleForm.pass;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ruleForm.checkPass === this.ruleForm.pass) {
            this.putRequest("/system/LectureInfoManagement/getLectureInfoByPage", this.admin3).then((resp) => {
              if (resp) {
                this.initAdmins();
                this.dialogVisible2 = false;
              }
            })
          } else {
            this.$message.error("两次输入的密码不一致");
          }
        } else {
          this.$message.error("请输入全部信息");
        }
      });

    },
    initAdmins() {
      this.getRequest("/system/admin").then((resp) => {
        if (resp) {
          this.admin = resp;
          this.admin2 = Object.assign({}, this.admin);
          window.sessionStorage.setItem("user", resp);
          this.$store.commit("INIT_ADMIN", resp);
          if(this.admin.id===2)
          {
            this.disabled1=true;
          }

        }
      });
    },
    showUpdate() {
      this.dialogVisible = true;
    },
    updateAdmin() {
      this.admin3.enabled = this.admin.enabled;
      this.admin3.id = this.admin.id;
      this.admin3.username = this.admin.username;
      this.admin3.name = this.admin2.name;
      this.admin3.phone = this.admin2.phone;
      this.admin3.sex = this.admin2.sex;
      this.admin3.password = 123;

      this.$refs.changeForm.validate((valid) => {
        if (valid) {

          this.putRequest("/system/LectureInfoManagement/getLectureInfoByPage", this.admin3).then((resp) => {
            if (resp) {
              this.dialogVisible = false;
              this.initAdmins();
            }
          })
        } else {
          this.$message.error("请输入全部信息");
        }
      });
    },
    showUpdatePassword() {
      this.dialogVisible2 = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.adminId = this.admin.id;
          this.putRequest("/admin-pass", this.ruleForm).then((resp) => {
            if (resp) {
              this.postRequest("/logout");
              window.sessionStorage.removeItem("user");
              window.sessionStorage.removeItem("tokenStr");

              this.$store.commit("initRoutes", []);
              this.$router.replace("/");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSuccess() {
      this.initAdmins();
    },
  },
};
</script>

<style>
.box-card {
  width: 480px;
}
</style>